<template>
	<view class="modal">
		<view class="modal-content">
			<scroll-view scroll-y="true" class="scroll-Y">
				<!-- 表单内容 -->
				<view class="form-item">
					<label>客户名:</label>
					<input v-model="formData.customerName" />
				</view>
				<view class="form-item">
					<label>手机号:</label>
					<input v-model="formData.mobile" type="number" />
				</view>
				<view class="form-item">
					<label>类型:</label>
					<picker mode="selector" :range="billTypes" :value="selectedTypeIndex.type" @change="bindTypeChange">
						<view class="picker">
							{{ formData.type}}
						</view>
					</picker>
				</view>
				<view class="form-item">
					<label>时间:</label>
					<picker v-model="formData.eventTime" mode="date" :value="formData.eventTime"
						@change="bindDateChange">
						<view class="uni-input">{{formData.eventTime}}</view>
					</picker>
				</view>
				<view class="form-item">
					<label>付款类型:</label>
					 <!-- :value="selectedDebtIndex" -->
					<picker mode="selector" range-key="text" :range="debtTypes" @change="bindDebtChange">
						<view class="picker">
							{{ formData.isDebt}}
						</view>
					</picker>
				</view>
			</scroll-view>
			<view class="actions">
				<button @click="addOrUpdate">确定</button>
				<button @click="$emit('close')">关闭</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			bill: Object
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				formData: {
					"amount": "",
					"billId": "",
					"billUrl": "",
					"cost": "",
					"customerAddress": "",
					"customerId": "",
					"customerName": "",
					"details": "",
					"eventTime": currentDate,
					"isDebt": "还清",
					"mobile": "",
					"timePeriod": "",
					"type": "打针"
				},
				billTypes: ['饲料', '打针', '兽药', '综合'],
				debtTypes: [{
					text: '还清'
				}, 
				{
					text: '欠账'
				}],
				selectedTypeIndex: 0,
				selectedDeptIndex: 0
			}
		},
		watch: {
			bill: {
				immediate: true,
				handler(newVal) {
					if (newVal) {
						this.formData = {
							...newVal
						};
						this.selectedTypeIndex = this.billTypes.indexOf(this.formData.type);
						this.selectedDebtIndex = this.debtTypes.indexOf(this.formData.isDebt);
					}
				}
			}
		},
		methods: {
			bindTypeChange(e) {
				this.selectedTypeIndex = e.detail.value;
				this.formData.type = this.billTypes[this.selectedTypeIndex];
			},
			bindDebtChange(e) {
				console.log(e)
				this.selectedDeptIndex = e.detail.value;
				this.formData.isDebt = this.debtTypes[this.selectedDeptIndex];
			},
			bindDateChange(e) {
				this.formData.eventTime = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			addOrUpdate() {
				// 添加其他参数到 formData 中
				uni.request({
					url: 'http://localhost:8888/drugStore/bill/addOrUpdate',
					method: 'POST',
					data: this.formData,
					success: (res) => {
						console.log(res.data);
						if (res.data.code === 1000) {
							this.$emit('close');
						} else {
							console.error('获取账单列表失败:', res);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			}
		}
	}
</script>

<style>
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-content {
		background: white;
		padding: 20px;
		border-radius: 8px;
		width: 80%;
		max-width: 500px;
	}

	.form-item {
		margin-bottom: 15px;
		display: flex;
		flex-direction: column;
	}

	label {
		font-weight: bold;
		margin-bottom: 5px;
	}

	input {
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 14px;
		width: 100%;
		height: 30%;
		box-sizing: border-box;
	}

	.uni-input {
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 14px;
		width: 100%;
		height: 30%;
		box-sizing: border-box;
	}

	.picker {
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 14px;
		width: 100%;
		height: 30%;
		box-sizing: border-box;
	}

	.actions {
		display: flex;
		justify-content: flex-end;
	}

	button {
		margin: 0, 30px;
		width: 60px;
		height: 30px;
		padding: 1px;
		background-color: #5cb85c;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 20px;
		text-align: center;
		line-height: 30px;
	}

	button:hover {
		background-color: #0056b3;
	}
</style>